<template>
  <div :class="['task-content', customClass] ">

    <van-cell title="一级维度"
              :value="taskContent.one" />
    <van-cell title="二级维度"
              :value="taskContent.two" />
    <van-cell title="三级维度"
              :value="taskContent.three" />

    <van-field label="标题"
               :value="updateData.title"
               @change="changeContent('title',$event)"
               placeholder="请输入任务标题" />

    <van-field label="能力类型"
               readonly="true"
               disabled="true"
               :value="currentAbility"
               @click="showAbility=true" />
    <van-popup :show="showAbility"
               position="bottom"
               overlay="true"
               @onClose="showAbility=false">
      <van-picker show-toolbar
                  :columns="abilityList"
                  @confirm="onSelectAbility"
                  @cancel="showAbility=false" />
    </van-popup>

    <div class="form-textarea">
      <h3 class="label">任务详情</h3>
      <van-field v-if="showDialog==false&&showAbility == false&&showDateTimePicker==false"
                 :value="updateData.detail"
                 type="textarea"
                 @change="changeContent('detail',$event)" />
    </div>

    <div class="form-textarea">
      <h3 class="label">评分标准</h3>
      <van-field v-if="showDialog==false&&showAbility == false&&showDateTimePicker==false"
                 :value="$globalData.taskgrade"
                 type="textarea"
                 readonly />
    </div>

    <div class="form-textarea">
      <h3 class="label">学习心得</h3>
      <van-field v-if="showDialog==false&&showAbility == false&&showDateTimePicker==false"
                 :value="updateData.experience"
                 type="textarea"
                 @change="changeContent('experience',$event)"
                 :readonly="($globalData.userIsStudent&&taskData.status === 1) == false" />
    </div>

    <div class="form-textarea">
      <h3 class="label">师傅建议</h3>
      <van-field v-if="showDialog==false&&showAbility == false&&showDateTimePicker==false"
                 :value="updateData.suggest"
                 type="textarea"
                 @change="changeContent('suggest',$event)"
                 :readonly="($globalData.userIsTeacher&&taskData.status === 6) == false" />
    </div>

      <van-field label="截止时间"
                 :readonly="true"
                 disabled="true"
                 :value="updateData.deadLine|date('yyyy-MM-dd')"
                 @click="showDateTimePicker=true" />

      <van-popup :show="showDateTimePicker"
                 position="bottom "
                 overlay="true"
                 @onClose="showDateTimePicker=false">
        <van-datetime-picker type="date"
                             :min-date="minDate"
                             :value="currentDate"
                             @confirm="onInput"
                             @cancel="showDateTimePicker=false" />
      </van-popup>

    <van-cell title="学习状态"
              :value="taskData.status|stringTaskStatus" />

    <div class="d-flex  justify-content-between custom-cell"
         v-if="$globalData.userIsStudent">
      <div>给老师打分</div>
      <div>
        <van-rate :value="teacherScore"
                  @change="updateTeacherScore"
                  size="16"
                  :readonly="taskData.status !== 1" />
      </div>
    </div>

    <div class="d-flex  justify-content-between custom-cell"
         v-if=" $globalData.userIsTeacher || taskData.status === 2">
      <div>给学生评分</div>
      <div>
        <van-rate :value="score"
                  @change="updateScore"
                  size="16"
                  :readonly="taskData.status !== 6" />
      </div>
    </div>

    <div v-if="showAction"
         class="fixed-bottom ">

      <!--学生-->
      <div v-if="$globalData.userIsStudent">
        <div class="d-flex justify-content-center task-content-page-bottom"
             style="height:48px"
             v-if="taskData.status === 1">
          <div @click="updateContent"
               class="custom-button-default d-flex align-items-center justify-content-center mr-3"
               style="width:160px;">
            修改心得
          </div>
          <div @click="updateStatus(6)"
               class="custom-button-success d-flex align-items-center justify-content-center"
               style="width:160px;">
            学习完成
          </div>

        </div>

        <div class="d-flex justify-content-center task-content-page-bottom"
             style="height:48px"
             v-if="taskData.status === 5">
          <div @click="updateStatus(4)"
               class="custom-button-success d-flex align-items-center justify-content-center"
               style="width:160px;">
            重新提交
          </div>
        </div>
      </div>
      <!--教师-->
      <div v-if="$globalData.userIsTeacher">
        <div class="d-flex justify-content-center task-content-page-bottom"
             style="height:48px"
             v-if="taskData.status === 4">
          <div @click="updateStatus(5)"
               class="custom-button-default d-flex align-items-center justify-content-center  mr-3"
               style="width:160px;">
            拒绝
          </div>
          <div @click="updateStatus(7)"
               class="custom-button-success d-flex align-items-center justify-content-center"
               style="width:160px;">
            批准
          </div>
        </div>

        <div class="d-flex justify-content-center task-content-page-bottom"
             v-if="taskData.status === 6">
          <div @click="updateStatus(2)"
               class="custom-button-success d-flex align-items-center justify-content-center"
               style="width:240px;height:48px;">
            完成评分
          </div>
        </div>
      </div>

      <!--管理员-->
      <div v-if="$globalData.userIsAdmin &&taskData.status === 7"
           class="d-flex justify-content-center task-content-page-bottom"
           style="height:48px">
        <div @click="updateStatus(5)"
             class="custom-button-default d-flex align-items-center justify-content-center  mr-3"
             style="width:160px;">
          拒绝
        </div>
        <div @click="updateStatus(1)"
             class="custom-button-success d-flex align-items-center justify-content-center"
             style="width:160px;">
          批准
        </div>
      </div>

    </div>

    <van-dialog id="van-dialog" />
  </div>
</template>

<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator'
import { Getter, Action } from 'vuex-class'
import filter from '@/utils/filters'
import Dialog from '@/static/vant/dialog/dialog'

@Component
export default class TaskContent extends Vue {
  public showDialog = false;
  public customClass = '';
  public taskId;

  public showAction = true;

  public taskContent: any = {};

  public updateData: any = {};

  public get score () {
    return this.taskData.score
  }
  public get teacherScore () {
    return this.taskData.teacherScore
  }
  public get taskData () {
    return this.$store.state.task.currentTask === null
      ? {}
      : this.$store.state.task.currentTask
  }

  public async created () {
    this.updateData = {}
    this.taskId = this.$mp.options['id']
    this.showAction = this.$mp.options['showAction']
      ? this.$mp.options['showAction'] !== '0'
      : true

    this.currentAbility = this.$globalData.abilityAllList[this.taskData.abilityType]

    Megalo.setNavigationBarTitle({
      title: filter.ellipsis(this.taskData.title, 25)
    })
    this.taskContent =
      this.taskData.content === null ? {} : this.taskData.content

    this.updateData.id = this.taskId
    this.updateData.detail = this.taskContent.detail
    this.updateData.experience = this.taskContent.experience
    this.updateData.suggest = this.taskData.suggest
    this.updateData.title = this.taskData.title
    this.updateData.abilityType = this.taskData.abilityType
    this.updateData.deadLine = this.taskData.deadLine
  }

  public changeContent (key, event) {
    this.updateData[key] = event.detail
  }

  public async updateContent (event) {
    try {
      this.showDialog = true
      await Dialog({
        title: '提示',
        message: '确认修改内容吗?',
        showCancelButton: true,
        zIndex: 1000000
      })
    } catch {
      this.showDialog = false
      return
    }
    this.showDialog = false
    try {
      await this.$http.put({
        url: 'studyTask/content',
        data: this.updateData
      })
    } catch {
      Megalo.showToast({
        title: '提交失败',
        icon: 'none',
        duration: 1000,
        mask: false
      })
      return
    }
    this.taskData.content.experience = this.updateData.experience
    this.taskData.content.detail = this.updateData.detail
    this.taskData.title = this.updateData.title
    this.taskData.abilityType = this.updateData.abilityType

    Megalo.showToast({
      title: '修改成功',
      icon: 'none',
      duration: 1000,
      mask: false
    })
  }

  public async updateTeacherScore (event) {
    try {
      await this.$http.put({
        url: 'studyTask/teacherScore',
        data: {
          id: this.taskId,
          score: event.detail
        }
      })
    } catch {
      Megalo.showToast({
        title: '提交失败',
        icon: 'none',
        duration: 1000,
        mask: false
      })
      return
    }
    this.taskData.teacherScore = event.detail

    Megalo.showToast({
      title: '打分成功',
      icon: 'none',
      duration: 1000,
      mask: false
    })
  }

  public async updateScore (event) {
    try {
      await this.$http.put({
        url: 'studyTask/score',
        data: {
          id: this.taskId,
          score: event.detail
        }
      })
    } catch {
      Megalo.showToast({
        title: '提交失败',
        icon: 'none',
        duration: 1000,
        mask: false
      })
      return
    }
    this.taskData.score = event.detail

    Megalo.showToast({
      title: '打分成功',
      icon: 'none',
      duration: 1000,
      mask: false
    })
  }
  public async updateStatus (status) {
    if (status === 6) {
      if (this.teacherScore === 0) {
        this.showDialog = true
        await Dialog({
          title: '提示',
          message: '尚未给师傅打分'
        })
        this.showDialog = false
        return
      }
    }

    if (status === 2) {
      if (this.score === 0) {
        this.showDialog = true
        await Dialog({
          title: '提示',
          message: '尚未给徒弟打分'
        })
        this.showDialog = false
        return
      }
      if (this.updateData.suggest === '' || this.updateData.suggest === null) {
        this.showDialog = true
        await Dialog({
          title: '提示',
          message: '尚未给徒弟建议'
        })
        this.showDialog = false
        return
      }
    }

    try {
      this.showDialog = true
      await Dialog({
        title: '提示',
        message: '确认你的提交吗?',
        showCancelButton: true
      })
    } catch {
      this.showDialog = false
      return
    }
    this.showDialog = false
    try {
      // 更新内容
      await this.$http.put({
        url: 'studyTask/content',
        data: this.updateData
      })
      this.taskData.content.experience = this.updateData.experience
      this.taskData.content.detail = this.updateData.detail
      this.taskData.suggest = this.updateData.suggest
      this.taskData.title = this.updateData.title
      this.taskData.abilityType = this.updateData.abilityType
      this.taskData.deadLine = this.updateData.deadLine
      // 更新状态
      await this.$http.put({
        url: 'studyTask/status',
        data: {
          id: this.taskId,
          status: status
        }
      })
    } catch {
      Megalo.showToast({
        title: '提交失败',
        icon: 'none',
        duration: 1000,
        mask: false
      })
      return
    }
    this.taskData.status = status
    this.$globalData.updateTask(this.taskData)
    Megalo.showToast({
      title: '提交成功',
      icon: 'none',
      duration: 1000,
      mask: false
    })
  }
  public showAbility = false;
  public currentAbility = '选择提升的能力';

  // 营销
  public abilityList1 = [
    '销售能力',
    '策划能力',
    '市场研究',
    '管理能力',
    '资源整合'
  ];
  // qita
  public abilityList2 = [
    '团队人员管理',
    '团队文化锻造',
    '业务基础精进',
    '技术工艺创新',
    '外部资源整合',
    '内部资源协调'
  ];

  public get abilityList () {
    if (this.taskData.abilityType <= 4) {
      return this.abilityList1
    }
    return this.abilityList2
  }

  public onSelectAbility (event) {
    const { picker, value, index } = event.detail
    this.taskData['abilityType'] = this.$globalData.abilityAllList.indexOf(
      value
    )
    this.updateData.abilityType = this.taskData['abilityType']
    this.currentAbility = value
    this.showAbility = false
  }

  public showDateTimePicker = false;

  public currentDate = new Date().getTime();
  public minDate = new Date().getTime();

  public onInput (event) {
    this.currentDate = event.detail
    this.updateData['deadLine'] = new Date(this.currentDate)
    this.showDateTimePicker = false
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.task-content {
  padding-bottom: 65px;
}

.custom-cell {
  width: 100%;
  padding: 10px 15px;
  font-size: 14px;
  line-height: 24px;
  color: #333;
  background-color: #fff;
  box-sizing: border-box;
}

.task-content-page-bottom {
  padding: 10px 0;
  background: #F7F7F7;
}
</style>
